<template>
  <div>
    <el-row class="row-bg" type="flex" align="middle">
      组织机构管理模块为你展示当前系统中的组织机构信息，同时，在本模块你可以新建/编辑组织机构信息。
    </el-row>
    <el-card>
      <el-button size="small" type="primary" icon="el-icon-refresh" @click="load">刷新</el-button>
      <el-button size="small" type="primary" icon="el-icon-plus" @click="add">新建</el-button>
    </el-card>
    <div style="display: flex;align-items: flex-start">
      <el-card style="width: 300px; min-height:600px;">
        <div style="background-color: #f7f7f7;">组织机构</div>
        <el-tree
          style="background-color: #f7f7f7;"
          :data="data"
          :props="defaultProps"
          accordion
          @node-click="handleNodeClick">
             <span class="custom-tree-node" slot-scope="{ node, data }">
                 <span v-if="currentRow.orgId==data.orgId" style="font-weight:bold">{{lableEllipsis(node.label)}}</span>
                 <span v-if="currentRow.orgId!=data.orgId">{{lableEllipsis(node.label)}}</span>
             </span>
        </el-tree>
      </el-card>
      <el-card style="width:calc(100% - 300px);min-height: 600px">
        <el-row inline style="text-align:left;" class="el-row">
          <el-col :span="12" style="text-align:left">
            <h1 style="display: inline-block;color: cornflowerblue">
              <span v-if="currentRow">{{this.currentRow.orgName}}</span>
            </h1>
            &nbsp;&nbsp;<ft-user-select v-if="currentRow" v-model="currentRow.managerId"
                                        :editable="false"></ft-user-select>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-dropdown @command="handleCommand">
              <span><i class="joys-icon-fusionmenu"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="edit">编辑</el-dropdown-item>
                <el-dropdown-item v-if="currentRow.status=='INIT'||currentRow.status=='STOP'" command="start">启用
                </el-dropdown-item>
                <el-dropdown-item v-if="currentRow.status=='START'" command="stop">禁用</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <span v-if="currentRow">{{this.currentRow.address}}</span>
        </el-row>
        <el-row style="margin-top: 10px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="税务及银行账户信息" name="first">
              <!--税务信息-->
              <org-tax ref="orgTax" @refresh="refreshMain" :org-id="currentRow.orgId"></org-tax>
              <!--银行账户信息-->
              <org-bank style="margin-top: 20px" :org-id="currentRow.orgId"></org-bank>
            </el-tab-pane>
            <el-tab-pane label="下属部门" name="second">
              <!--部门信息-->
              <org-dept ref="orgDept" :org-id="currentRow.orgId" title-type="list"></org-dept>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
  import OrgTax from "./OrgTax";
  import OrgBank from "./OrgBank";
  import OrgDept from "./OrgDept";

  export default {
    name: "OrgList",
    components: {OrgDept, OrgBank, OrgTax},
    mounted() {
      this.load()
    },
    data() {
      return {
        data: [],
        defaultProps: {
          children: 'children',
          label: 'orgName'
        },
        editable: false,
        currentRow: {},
        activeName: 'first'
      }
    },
    methods: {
      load() {
        this.data = []
        this.$http.get('/joys-rest/joys-master-data/orgs/query/tenant').then(resp => {
          this.data = resp.body
          this.currentRow = this.data[0]
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      handleCommand(value) {
        if (this.currentRow) {
          if (value == 'edit') {
            this.$emit("returnValue", {status: 'org-detail', orgId: this.currentRow.orgId});
          } else if (value == 'start' || value == 'stop') {
            if (value == 'start') {
              this.currentRow.status = 'START'
            } else if (value == 'stop') {
              this.currentRow.status = 'STOP'
            }
            this.$http.post('/joys-rest/joys-master-data/orgs/save', this.currentRow).then(resp => {
              this.currentRow = resp.body
              this.$message.success('操作成功！')
            }, resp => {
              this.$message.error(resp.body.message)
            })
          }
        }
      },
      add() {
        if (this.currentRow) {
          this.$emit("returnValue", {status: 'org-detail', parentId: this.currentRow.orgId});
        } else {
          this.$emit("returnValue", {status: 'org-detail', parentId: null});
        }
      },
      handleNodeClick(value) {
        this.currentRow = value
      },
      handleClick(tab, event) {

      },
      refreshMain() {

      },
      lableEllipsis(value) {
        if (value.length > 12) {
          return value.substr(0, 12)+'......'
        }
        return value
      }
    }
  }
</script>

<style scoped>

</style>
